// 阶段4

import React from 'react';
import { Form, Row, Col, Input, DatePicker } from 'antd';
import { observer } from 'mobx-react-lite';
import { FileUploader } from '~/components/FileUploader';
import { genValidConfig } from '~/pages/project/new/pageConfig';
import '../index.local.sass';

const formItemLayout = {
  wrapperCol: { span: 20 },
};

const { TextArea } = Input;

export const StageFour = observer(() => {
  const fileUploadOptions = {
    accept: 'application/zip,application/vnd.rar,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf',
    max: 1,
  };

  return (
    <div className="stage4">

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item label={'Composition of the transfer group, transfer procedures and criteria'}
            name="transferGroupComposition"
            rules={[
              {
                required: true,
                message: 'Please provide Composition of the transfer group, transfer procedures and criteria',
              },
            ]}
          >
            <TextArea
              rows={4}
              placeholder="Please provide Composition of the transfer group, transfer procedures and criteria"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24} className="mb-4">
        <Col span={8}>
          <div className="file-item">
            <Form.Item
              label={'Lists of transfer assets or facilities or interests'}
              name="transferList">
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Performance test plan'}
              name="performanceTestPlan"
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Transfer of assets or equity assessment report'}
              name="assessmentReport"
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={24}>
          <Form.Item
            label={'Removal of various types of guarantees or restrictions on the transfer of project assets or facilities'}
            name="removalRestrictions"
          >
            <TextArea
              rows={4}
              placeholder="Please provide Composition of the transfer group, transfer procedures and criteria"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item label={'Project transfer completion date'}
            name="completionTime"
            rules={genValidConfig('Project transfer completion date')}
            {...formItemLayout}
          >
            <DatePicker
              showTime
              placeholder="Please select"
              style={{ width: '100%' }}
              format="YYYY-MM-DD"/>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label={'Project warranty period'}
            name="warrantyPeriod"
            rules={genValidConfig({ selfType: 'numString', required: 'false' })}
            {...formItemLayout}
          >
            <Input placeholder="Please input" suffix="year(s)"/>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Project facility transfer compliance test results'}
              name="testResult"
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
        <Col span={8}>
          <div className="file-item">
            <Form.Item label={'Project follow-up operation'}
              name="followUpOperation"
            >
              <FileUploader
                {...fileUploadOptions}
              />
            </Form.Item>
          </div>
          <p className="text-xs cor-grey">Support ZIP RAR DOC DOCX PDF only</p>
        </Col>
      </Row>
    </div>
  );
});
